import React from 'react';
import './index.scss';

const Home: React.FC = () => {
  return (
    <div className="home-page">
      {/* 头部 */}
      <header className="header">
        <div className="container">
          <nav className="navbar">
             <div className="logo">
                <div className='logo-img' />
             </div>
            <ul className="nav-menu">
              <li><a href="#home">主页</a></li>
              <li><a href="#about">关于我</a></li>
              <li><a href="#skills">技能</a></li>
              <li><a href="#projects">作品集</a></li>
              <li><a href="#contact">联系我</a></li>
            </ul>
          </nav>
        </div>
      </header>

      {/* 英雄部分 */}
      <section id="home" className="hero">
        <div className="container">
          <div className="hero-content">
            <div className="hero-text">
              <h1>你好，我是 <span className="highlight">Black</span></h1>
              <h2>我是一名全栈开发工程师</h2>
              <p>我在寻找真正的自己。</p>
              <p>我想把这个孤独的世界走遍。</p>
              <p>我想把这次旅程，变成一场华丽的冒险。</p>
              {/* <div className="hero-buttons">
                <button className="btn btn-primary">查看我的作品</button>
                <button className="btn btn-secondary">下载简历</button>
              </div> */}
            </div>
            <div className="hero-image">
              <div className="profile-placeholder"></div>
              <div className="quote-section">
                <div className="quote-container">
                  <div className="quote-content">
                      <p className="quote-text">"代码是写给人看的，只是恰好机器也能执行。"</p>
                      <p className="quote-author">— Harold Abelson</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 关于我部分 */}
      <section id="about" className="about">
        <div className="container">
          <h2 className="section-title">关于我</h2>
          <div className="about-content">
            <p>思想活跃，喜欢研究底层代码的运行逻辑，系统阅读过Vue框架源代码；</p>
            <p>涉猎广泛，乐于研究业界新技术，喜欢做一些很酷的事情；</p>
            <p>习惯良好，有模块化和结构化的编程思想，能严格按照ESLint规范书写代码；</p>
            <p>态度端正，对待工作认真负责，不喜欢拖延行为。</p>
            <div className="about-stats">
              <div className="stat">
                <h3>3年</h3>
                <p>前端开发经验</p>
              </div>
              <div className="stat">
                <h3>1年</h3>
                <p>后端开发经验</p>
              </div>
              <div className="stat">
                <h3>10+</h3>
                <p>大型项目经验</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 技能部分 */}
      <section id="skills" className="skills">
        <div className="container">
          <h2 className="section-title">我的技术栈</h2>
          <div className="skills-grid">
            <div className="skill-category">
              <h3>Frontend</h3>
              <div className="skill-items">
                <span className="skill-item">JavaScript/HTML/CSS</span>
                <span className="skill-item">TypeScript</span>
                <span className="skill-item">Vue(2/3)</span>
                <span className="skill-item">React</span>
                <span className="skill-item">Mini-Program</span>
                <span className="skill-item">Electron</span>
              </div>
            </div>
            <div className="skill-category">
              <h3>Backend</h3>
              <div className="skill-items">
                <span className="skill-item">Node.js</span>
                <span className="skill-item">Express</span>
                <span className="skill-item">Python</span>
                <span className="skill-item">Django</span>
                <span className="skill-item">Flask</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 作品集 */}
      <section id="projects" className="projects">
        <div className="container">
          <h2 className="section-title">我的作品</h2>
          <div className="projects-grid">
            <div className="project-card">
              <div className="project-image">
                <div className="image-placeholder">Project 1</div>
              </div>
              <div className="project-content">
                <h3>E-commerce Platform</h3>
                <p>A full-stack e-commerce solution with React frontend and Node.js backend.</p>
                <div className="project-tech">
                  <span>React</span>
                  <span>Node.js</span>
                  <span>MongoDB</span>
                </div>
              </div>
            </div>
            <div className="project-card">
              <div className="project-image">
                <div className="image-placeholder">Project 2</div>
              </div>
              <div className="project-content">
                <h3>Task Management App</h3>
                <p>A collaborative task management application with real-time updates.</p>
                <div className="project-tech">
                  <span>React</span>
                  <span>Socket.io</span>
                  <span>Express</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 联系我 */}
      <section id="contact" className="contact">
        <div className="container">
          <h2 className="section-title">联系我</h2>
          <div className="contact-content">
            <div className="contact-info">
              <h3>很期待能与你做一些有趣的事情!</h3>
              <p>我是一个很随和的人，如果你有任何问题，欢迎随时联系我。</p>
              <div className="contact-details">
                <div className="contact-item">
                  <span>📧 2315404859@qq.com</span>
                </div>
              </div>
            </div>
            <div className="contact-form">
              <form>
                <input type="text" placeholder="你的名字" required />
                <input type="email" placeholder="你的邮箱" required />
                <textarea placeholder="想和我说点什么吗？" rows={5} required></textarea>
                <button type="submit" className="btn btn-primary">发送消息</button>
              </form>
            </div>
          </div>
        </div>
      </section>

      {/* 底部 */}
      <footer className="footer">
        <div className="container">
          <p>&copy; 2025 Black. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
};

export default Home; 